import React from 'react';
import { createForm } from 'rc-form';
import { ToastTips } from '../../../../common/toastTips/tosat';
import styles from './register.css';
import CustBtn from '../../../../common/buttons/Btn';

const Register = ({
  onSave=()=>{},
  form: { getFieldProps, getFieldsValue, validateFields }
}) => {

  const btnProps = {
    textValue:'注册',
    onOk(){
      validData();
    },
  }

  const validData = () => {
    validateFields((error, value) => {
      // console.log(error, value);
      const account = value.account.trim();
      const password = value.password.trim();
      const restPassword = value.restPassword.trim();
      const isPhoneNumber = /^1\d{10}$/;
      if(!account){
        ToastTips('手机号码不能为空', 2000, null);
        return;
      }

      if(!isPhoneNumber.test(account)){
        ToastTips('手机格式不正确', 2000, null);
        return;
      }

      if(!password){
        ToastTips('密码不能为空', 2000, null);
        return;
      }

      if(!password){
        ToastTips('密码不能少于六位', 2000, null);
        return;
      }

      if(!restPassword){
        ToastTips('确认密码不能为空', 2000, null);
        return;
      }

      if(!restPassword){
        ToastTips('确认密码不能少于六位', 2000, null);
        return;
      }

      if(password != restPassword){
        ToastTips('两次密码不一致', 2000, null);
        return;
      }
      const data = {
        account,
        password
      }
      console.log('value', JSON.stringify(data))
      onSave(data);
    });
  }

  const Seperator = () => <div style={{marginBottom: '1em'}}></div>;

  return (
    <div className={styles.content}>
      <div className={styles.title}>
        {/* <img src={arrowIcon} className={styles.titleIcon} onClick={() => goBack()}/> */}
        <div className={styles.titleText}>注册</div>
        {/* <img src={writeIcon} className={styles.titleWriteIcon}/> */}
      </div>
      <div className={styles.contentBody}>
        <input type="number"
            {...getFieldProps('account',{
              initialValue:'',
              rules: [
                { required: false, message: '手机号码不能为空' }
              ]
            })}
            placeholder="请输入11位手机号码"
            maxLength='11'
            className={styles.inputStyle}
          />
        <Seperator/>
        <input type="password"
            {...getFieldProps('password',{
              initialValue:'',
              rules: [
                { required: false, message: '密码不能为空' }
              ]
            })}
            placeholder="请输入密码"
            className={styles.inputStyle}
          />
        <Seperator/>
        <input type="password"
            {...getFieldProps('restPassword',{
              initialValue:'',
              rules: [
                { required: true, message: '确认密码不能为空' }
              ]
            })}
            placeholder="再次确认密码"
            className={styles.inputStyle}
          />
        {/* <Seperator/>
        <div className={styles.validateNumber}>
          <input type="number"
              {...getFieldProps('validNamber',{
                initialValue:'',
                rules: [
                  { required: true, message: '验证码不能为空' }
                ]
              })}
              placeholder="请输入6位验证码"
              className={styles.validInputStyle}
            />
          <div className={styles.validBtn}>
            获取验证码
          </div>
        </div>
        <Seperator/>
        <div className={styles.childrenBtns}>
          <div className={styles.resetPassword}无法获取验证码</div>
        </div> */}
        <Seperator/>
        <div className={styles.btn}>
          <CustBtn {...btnProps}/>
        </div>
      </div>
    </div>
  );
};

Register.propTypes = {
};

export default createForm()(Register);
